<template>
  <div id="app">
    <el-row :gutter="24" style="height: 100%">
      <!-- 登录异常图部分 -->
      <el-col :span="12">
        <div class="grid-content bg-purple" style="height: 550px">
          <div class="loginError" style="width: 100%; height: 100%">
            <div id="loginError" style="width: 100%; height: 100%"></div>
          </div>
        </div>
      </el-col>
      <!-- 登录异常列表部分 -->
      <el-col :span="12">
        <div class="grid-content" style="height: 550px">
          <div class="table" style="width: 100%; height: 550px">
            <el-table
              :data="tableData"
              highlight-current-row
              tooltip-effect="dark"
              height="500"
              @current-change="handleSelectionChange"
              style="width: 100%; height: 500px"
            >
              <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
              <el-table-column fixed prop="data" label="日期" width="100">
              </el-table-column>
              <el-table-column prop="user" label="用户ID" width="60">
              </el-table-column>
              <el-table-column prop="proto" label="proto" width="90">
              </el-table-column>
              <el-table-column prop="dip" label="dip" width="90">
              </el-table-column>
              <el-table-column prop="sip" label="sip" width="90">
              </el-table-column>
            </el-table>
            <div style="margin-top: 10px">
              <el-button
                type="success"
                @click="toggleSelection()"
                >忽略错误</el-button
              >
              <el-button type="danger" @click="toggleSelection1()"
                >封禁用户</el-button
              >
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: "LoginError",
  data() {
    return {
      tableData:[],
      multipleSelection: [],
      loginError: "",
      deleId: "",
      depOption: {
        title: {
          left: "center",
          bottom: "10",
          text: "异常登录top10每日错误次数",
          backgroundColor: "rgb(128, 128, 128)",
          padding: [10, 10],
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: [
            "1487",
            "1210",
            "1417",
            "1344",
            "1224",
            "1254",
            "1151",
            "1172",
            "1252",
            "1106",
          ],
          right: "10",
          top: "10",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "2017年11月1日",
            "2017年11月2日",
            "2017年11月3日",
            "2017年11月4日",
            "2017年11月5日",
            "2017年11月6日",
            "2017年11月7日",
            "2017年11月8日",
            "2017年11月9日",
            "2017年11月10日",
            "2017年11月11日",
            "2017年11月12日",
            "2017年11月13日",
            "2017年11月14日",
            "2017年11月15日",
            "2017年11月16日",
            "2017年11月17日",
            "2017年11月18日",
            "2017年11月19日",
            "2017年11月20日",
            "2017年11月21日",
            "2017年11月22日",
            "2017年11月23日",
            "2017年11月24日",
            "2017年11月25日",
            "2017年11月26日",
            "2017年11月27日",
            "2017年11月28日",
            "2017年11月29日",
            "2017年11月30日",
          ],
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value} 次",
          },
          max: 30,
        },
        series: [
          {
            name: "1487",
            type: "line",
            data: [
              0, 0, 24, 25, 0, 24, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0,
              0, 1, 0, 0, 0, 0, 0, 0, 0,
            ],

            markPoint: {
              data: [
                {
                  type: "max",
                  name: "最大值",
                },
              ],
            },
            markLine: {
              data: [
                {
                  type: "average",
                  name: "平均值",
                },
              ],
            },
          },
          {
            name: "1210",
            type: "line",
            data: [
              2, 1, 2, 0, 0, 1, 1, 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 2, 3, 1, 2,
              0, 1, 0, 0, 2, 0, 1, 2,
            ],
          },
          {
            name: "1417",
            type: "line",
            data: [
              1, 0, 2, 0, 0, 3, 1, 1, 1, 2, 0, 0, 0, 2, 2, 0, 0, 0, 0, 0, 0, 2,
              2, 0, 0, 0, 1, 1, 1, 2,
            ],
          },
          {
            name: "1344",
            type: "line",
            data: [
              2, 1, 1, 0, 0, 0, 1, 1, 1, 2, 0, 0, 2, 2, 1, 0, 0, 0, 0, 0, 0, 2,
              2, 2, 0, 0, 2, 0, 0, 2,
            ],
          },
          {
            name: "1224",
            type: "line",
            data: [
              1, 1, 2, 0, 0, 0, 1, 2, 0, 1, 0, 0, 1, 3, 2, 1, 1, 0, 0, 1, 0, 0,
              3, 0, 0, 0, 2, 0, 1, 0,
            ],
          },
          {
            name: "1254",
            type: "line",
            data: [
              0, 2, 2, 0, 0, 1, 3, 0, 1, 2, 0, 0, 2, 2, 2, 0, 1, 0, 0, 0, 0, 0,
              2, 0, 0, 0, 1, 0, 1, 1,
            ],
          },
          {
            name: "1151",
            type: "line",
            data: [
              0, 1, 1, 0, 0, 0, 2, 1, 2, 2, 0, 0, 0, 2, 3, 2, 0, 0, 1, 0, 0, 1,
              1, 1, 2, 0, 0, 1, 0, 0,
            ],
          },
          {
            name: "1172",
            type: "line",
            data: [
              1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 2, 1, 1, 2, 0, 0, 4, 3, 0,
              0, 1, 0, 0, 2, 1, 0, 2,
            ],
          },
          {
            name: "1252",
            type: "line",
            data: [
              3, 2, 0, 0, 0, 0, 0, 1, 1, 2, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0,
              4, 0, 0, 0, 1, 1, 2, 1,
            ],
          },
          {
            name: "1106",
            type: "line",
            data: [
              0, 2, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 1, 1, 0, 2, 1, 0, 0, 1, 1, 0,
              2, 0, 0, 2, 1, 1, 1, 2,
            ],
          },

          {
            name: "异常登录top10",
            type: "pie",
            center: ["65%", "35%"],
            // radius: '200%',
            z: 100,
            radius: [10, 140],
            label: {
              show: true,
              position: "inside",
            },
            roseType: "area",
            data: [
              {
                value: 23,
                name: "1151",
              },
              {
                value: 24,
                name: "1344",
              },
              {
                value: 29,
                name: "1210",
              },
              {
                value: 21,
                name: "1106",
              },
              {
                value: 24,
                name: "1417",
              },
              {
                value: 22,
                name: "1252",
              },
              {
                value: 23,
                name: "1254",
              },
              {
                value: 76,
                name: "1487",
              },
              {
                value: 22,
                name: "1172",
              },
              {
                value: 23,
                name: "1224",
              },
            ],
          },
        ],
      },
    };
  },
  mounted: function () {
    this.loginError = this.$echarts.init(
      document.getElementById("loginError"),
      "halloween"
    );
    this.loginError.setOption(this.depOption);
    this.initWords();
  },
  created() {
					// 页面默认有没有数据不重要,重要的是拿到数据或数据改变就要去处理数据,添加或改变自增id,也就是模拟索引值
					for (let i = 0; i < this.tableData.length; i++) {
						this.tableData[i].zizengId = i;
					}
				},
  methods: {
    initWords() {
      this.$http({
          method: 'get',
          url: 'login/loginError',
          params: {
            state: "error",
            day: "2017-11-15",
          },
        }).then((res) => {
          // console.log(res)
          res = res.data;
          this.tableData = res;
          // console.log(this.total)
        });
    },
    arrsDel() {
						// 删除时arr接收选中数据的自增Id
						let arr = [];
						for (let i = 0; i < this.multipleSelection.length; i++) {
							arr.push(this.multipleSelection[i].zizengId) //此处接收了所有选中的自增id
						}
						arr.sort(); //此处作用是将数组内的值从小到大排序,下面循环从小到大删除,就不会出现问题
						for (let a = 0; a < arr.length; a++) {
							this.tableData.splice(arr[a] - a, 1); //这一步就已经删除成功了,arr[a]-a的原因是每次删除后原数组都会发生变化,我们的删除起点要改变一下
						}
						// 删除完成后要从新排一下我们的自增id
						for (let i = 0; i < this.tableData.length; i++) {
							this.tableData[i].zizengId = i;
						}
					},
    toggleSelection1() {
      this.$confirm('此操作将永久删除此书籍, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(parseInt(this.deleId))
        this.$http.post({
          method: 'post',
          url: 'login/loginDelte',
          params: {
            userId: this.deleId,
          },
        }).then(resp => {

          if (resp) {
            console.log(resp)
          }
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.initBook()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      // this.deleteChange()
      // this.$message.success('操作成功！')
    },

    handleSelectionChange(val){
      console.log("所点击的表格数据为",val)
      this.deleId = val.suer
      console.log("delId is",this.deleId)

    },
    toggleSelection() {
        this.$message({
          showClose: true,
          message: '忽略用户的操作',
          type: 'success'
        });
    },
    toggleSelection1() {
        this.$message({
          showClose: true,
          message: '对用户进行封禁操作',
          type: 'success'
        });
    },
  // toggleSelection(){
  //   console.log('下面打印的是选中的数据')
  //   console.log("点击数据 is ",parseInt(this.deleId))
  //   axios.post("http://localhost:8087/user/getAll").then(res=>{
  //     console.log("结果为 ",res)
  //   })
  // }

  },
};
</script>

  <style>
.bg-purple {
  background: #d3dce6;
}
</style>
